<!DOCTYPE html> 
<html>
	<head>
		<title>左侧菜单</title>
		<meta charset="utf-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/left.css" rel="stylesheet"  />
		<style>
			body{
				background-color: #4196CF;/*背景颜色*/
				overflow: hidden;
			}
			.menu_list {
				width: 200px; /*菜单宽度*/
				margin: 0;
			}
			
			.menu_head {/*菜单表头格式*/
				height:39px;
				line-height: 47px;
				padding-left: 38px;
				font-size: 17px;
				color: #525252;
				cursor: pointer;
				border: 1px solid #f1f1f1;
				position: relative;
				margin: 0px;
				font-weight: bold;
				background-image: url(img/columns.gif);
				padding-left: 60px;
				font-family: "微软雅黑";
				
			}
			
			.menu_list .current {
				background: #51a9f18c;
			}
			
			.menu_nva {    /*菜单下拉列表选项格式*/
				width: 200px;
				line-height: 38px;
				border-left: 1px solid #51a9f18c;
				border-right: 1px solid #51a9f18c;
				font-family: "微软雅黑";
				font-weight: bold;
			}
			
			.menu_nva a {    /*标签a格式*/
				display: block;
				height: 38px;
				line-height: 38px;
				padding-left: 38px;
				color: #777777;
				background: #fff;
				text-decoration: none;
				border-bottom: 1px solid #51a9f18c;
			}
			
			.menu_nva a:hover {/*鼠标指针放在选项上变化情况*/
				background-image: url(img/side_li_on2.png);
				color: white;
				
			}
		</style>
	</head>

	<body>
		<img src="img/menu.gif"/>
		<div id="firstpaneDiv" class="menu_list">
			<h3 class="menu_head">人员信息管理</h3>
			<div style="display:none" class="menu_nva">
				<a href="right.html" target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;人员信息</a>
				<a href="right02.html"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;添加信息</a>
				<a href="right03.html"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;启用信息</a>
			</div>
			<h3 class="menu_head">出勤管理</h3>
			<div style="display:none" class="menu_nva">
				<a href="#" target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;出勤情况</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;每月出勤</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;当日出勤</a>
			</div>
			<h3 class="menu_head">系统管理</h3>
			<div style="display:none" class="menu_nva">
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;角色管理</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;权限管理</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;角色分配</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;登录日志</a>
				<a href="#"target="aa2">&nbsp;&nbsp;&nbsp;&nbsp;系统配置</a>
			</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){/*网上搜的代码= =*/
	$("#firstpaneDiv .menu_nva:eq(0)").show();
	$("#firstpaneDiv h3.menu_head").click(function(){
		$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
	$("#secondpane .menu_nva:eq(0)").show();
	$("#secondpane h3.menu_head").mouseover(function(){
		$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
});
</script>
</body>
</html>